<template>
  <div>
    <input type="text" v-model="todoValue" @keyup="setTodoValue" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";

//导入自定义hooks
import { useTodo, IUseTodo } from "@/hooks/index";

export default defineComponent({
  name: "TodoInput",
  setup() {
    //类型注解 加 泛型<string>
    const todoValue = ref<string>("");

    const { setTodo }: IUseTodo = useTodo();

    //类型注解 加 事件类型 KeyboardEvent
    const setTodoValue = (e: KeyboardEvent): void => {
      //回车键且输入内部不为空
      if (e.keyCode === 13 && todoValue.value.trim().length) {
        //调用自定义hooks里的setTodo方法进行对象组装并把对象存入state
        setTodo(todoValue.value);

        //清空输入框
        todoValue.value = "";
      }
    };

    return {
      todoValue,
      setTodoValue,
    };
  },
});
</script>